<template>
  <div class="home" style="background: rgb(189, 153, 220)">
    <van-search background="rgb(189, 153, 220)" placeholder="请输入搜索关键词" />
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="deeppink">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img class="s-img" :src="item.coverImage | dalImg" :alt="item.id" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        :to="{ name: 'List', params: { id: value.id } }"
        v-for="value in categories"
        :key="value.id"
        :icon="value.coverImage | dalImg"
        :text="value.name"
      />
    </van-grid>
    <van-card
      v-for="(i, index) in list"
      :num="i.amount"
      :tag="index + 1 + ''"
      :key="i.id"
      :price="i.price.toFixed(2)"
      :title="i.name"
      :thumb="i.coverImage | dalImg"
      origin-price="10.00"
      @click="onClickDetail(i.id)"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import { lunbotuAPI } from '../utils/main';
import { loadDataAPI } from '../services/products';
import { loadCategoriesAPI } from '@/services/categories';

export default {
  name: 'HomeView',
  data() {
    return {
      banners: [],
      list: [],
      categories: [],
    };
  },
  methods: {
    onClickDetail(id) {
      if (event.target.classList.contains('van-image__img')) {
        this.$router.push({
          name: 'Detail',
          query: {
            id,
          },
        });
      }
    },
  },
  components: {},
  async created() {
    // get('/api/v1/banners').then((res) => {
    //   this.LoopImage = res.data.data;
    // });
    const res = await lunbotuAPI();
    const res1 = await loadDataAPI();
    const res2 = await loadCategoriesAPI();
    this.banners = res.data;
    this.list = res1.data;
    this.categories = res2.data;
  },
};
</script>
<style scoped>
.s-img {
  width: 100%;
}
</style>
